<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/vue.js"></script>
</head>
<body>
    <div id="content" >
        <!--//按键响应提示音-->

        <button type="button" v-on:click="music_clickPlay('click1')">A</button>
        <button type="button" v-on:click="music_clickPlay('click2')">S</button>
        <button type="button" v-on:click="music_clickPlay('click3')">D</button>

        <div style="display: None;">
            <!--    参考<https://www.w3school.com.cn/html5/att_audio_autoplay.asp> -->
            <audio id="click1" controls="controls" autoplay="autoplay">
                <source src="../static/mp3/click4.mp3" type="audio/mpeg">
            </audio>

            <audio id="click2" controls="controls">
                <source src="../static/mp3/click2.mp3" type="audio/mpeg">
            </audio>

            <audio id="click3" controls="controls">
                <source src="../static/mp3/click3.mp3" type="audio/mpeg">
            </audio>
        </div>
    </div>
</body>

    <script>

        var musicTmp = new Vue({
            el: "#content",
            data : {
                
            },

//            mounted : function () {
//                window.setInterval(this.music_autoPlay,2000)
//            },

            methods : {


                music_autoPlay : function () {
                    var rand = Math.round(Math.random()*3);  //随机获取1~3的值，用来模拟播放A,S,D的提示音  一般由后台传过来

                    var temp = "click" + rand
                    console.log(temp)
                    var audio = document.getElementById(temp)
                    //参考[js控制html5 audio的暂停、播放、停止](https://www.cnblogs.com/kingplus/p/5587441.html)
                    if(audio!==null) {
                        //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//                        alert(audio.paused);
                        if (audio.paused) {
                            audio.play();//audio.play();// 这个就是播放
                        } else {
                            audio.pause();// 这个就是暂停
                        }
                    }

                    //audio.play()会报如下错误：code007_audioAutoTest.html:51 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first
                    //参考 https://www.cnblogs.com/wsg25/p/9640316.html  更新chrome即可
                },

                music_clickPlay : function(music_id){

//                    alert(music_id)
                    var audio = document.getElementById(music_id)
                    //参考[js控制html5 audio的暂停、播放、停止](https://www.cnblogs.com/kingplus/p/5587441.html)
                    if(audio!==null) {
                        //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//                        alert(audio.paused);
                        if (audio.paused) {
                            audio.play();//audio.play();// 这个就是播放
                        } else {
                            audio.pause();// 这个就是暂停
                        }
                    }
                }

            }
        })

    </script>

</html>